import React from 'react';
import {
    Container,
    List,
    NavBar,
    Slider,
    Group,
    View,
    Card,
    Grid,
    Col,
  Field,
  Icon,
  Button,
} from 'amazeui-touch';
import {
    Link,
} from 'react-router';

import axios from 'axios';

import PullDownSelect from "../componet/PullDownSelect.js"



export default class Index extends React.Component {
    static defaultProps = {
        transition: 'rfr'
    };
    constructor(props) {
        super(props);
        this.state = {
          data: [{name:"test",id:1}],
          isTypeOpen:false,
          isOrderOpen:false,
          typeVal:0,
          orderVal:0,
          flowerData:[],
          typeData:[],
          keyWord:"",
        }
        this.getFlowers();
        this.getType();
      this.handleChange = this.handleChange.bind(this)
    }

    getFlowers(){
      axios.get("/api/flower/list",{params: {typeId: this.state.typeVal,orderType:this.state.orderVal,keyWord:this.state.keyWord}})
        .then(res => {
          this.setState({ flowerData: res.data.data.data});
        });
    }

    getType(){
      axios.get("/api/flower/type")
        .then(res => {
          res.data.data.map((item)=>{
            item["val"]=item.id;
          })
          res.data.data.unshift({name:"全部分类",val:0})
          this.setState({ typeData: res.data.data});
        });
    }
    setOpenStatus(order){
      if(order==1)
        this.setState({isTypeOpen:!this.state.isTypeOpen,isOrderOpen:false});
      else
        this.setState({isOrderOpen:!this.state.isOrderOpen,isTypeOpen:false});
    }
    selectOption(key,val){
      let setObj={isTypeOpen:false,isOrderOpen:false};
      setObj[key]=val;
      this.setState(setObj,() => {
        this.getFlowers();
      });
    }
    handleChange(event) {

      this.setState({keyWord: event.target.value},() => {
        this.getFlowers();
      });

    }


    render() {
        return (
            <View>
                <Field
                  onChange={this.handleChange}
                  value={this.state.keyWord}
                  placeholder="请输入搜索关键词..."
                  labelBefore={<Link to={{pathname:"/"}}><Icon name="left-nav"/></Link>}
                   containerClassName='classify-search'
                  />

              <div className="type-select">
                <PullDownSelect isOpen={this.state.isTypeOpen}
                                onOpenClick={(e)=>this.setOpenStatus(1)}
                                onSelect={(item)=>this.selectOption('typeVal',item.val)}
                                val={this.state.typeVal}
                                options={this.state.typeData}
                  />
                <PullDownSelect isOpen={this.state.isOrderOpen}
                                onOpenClick={()=>this.setOpenStatus(2)}
                                onSelect={(item)=>this.selectOption('orderVal',item.val)}
                                val={this.state.orderVal}
                                options={[{name:'综合排序',val:0},{name:'销量排序',val:1},{name:'价格最高',val:2},{name:'价格最低',val:3}]}/>
              </div>
                <Container scrollable>
                  <List style={{margin:0}}>
                    {this.state.flowerData.map((flower, i) => {
                      return (
                        <List.Item
                          title={flower.name}
                          target="_blank"
                          media={<img width="80" src={flower.imgUrl} />}
                          subTitle={flower.ps}
                          linkComponent={Link}
                          linkProps={{to:"Detail/"+flower.id+"?typeVal="+this.state.typeVal+"&orderVal="+this.state.orderVal+"&keyWord="+this.state.keyWord+"&back=Classify"}}
                          key={i}
                          />
                      );
                    })}
                  </List>
                </Container>
            </View>
        );
    }
}
